<!-- 人员管理-安全题库-题库列表-->
<template>
    <div class="questionBank">
        <!-- 搜索 -->
        <el-card class="box-card" body-style="display: flex; align-items: center; justify-content: space-between;">
            <div class="cardBody">
                <div class="cardBody1">
                    试题分类:
                    <el-select class="ecard_val" v-model="searchItem.classification" clearable placeholder="请选择" size="small">
                        <el-option v-for="item in classificationOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </div>
                <div class="cardBody1">
                    题型:
                    <el-select class="ecard_val" v-model="searchItem.questionType" clearable placeholder="请选择" size="small">
                        <el-option v-for="item in questionTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </div>
                <div class="cardBody1">
                    试题名称:
                    <el-input class="ecard_val" placeholder="请输入" v-model="searchItem.TestQuestionName" clearable size="small"></el-input>
                </div>
                <div>
                    <el-button type="primary" size="small" @click="onSearch">搜索</el-button>
                </div>
            </div>
            <el-button type="primary" size="small" @click="onAdd()">添加试题</el-button>
        </el-card>

        <!-- 列表 -->
        <el-card class="boxCard">
            <el-table :data="tableData" stripe style="width: 100%" :height="tableHeight">
                <el-table-column prop="categoryName" label="试题分类" width="150"></el-table-column>
                <el-table-column prop="title" label="试题名称" ></el-table-column>
                <el-table-column prop="description" label="描述"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="110"></el-table-column>

                <el-table-column fixed="right" label="操作" align="center" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small">编辑</el-button>
                        <el-popconfirm title="确定要删除此项吗？" @confirm="onDel(scope.row)">
                            <el-button slot="reference" type="text" size="small">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <div class="boxCard_-pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[10, 30, 50, 100]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </el-card>

        <!-- 弹窗 -->
        <el-dialog :title="popupType == 1 ? '添加试题' : '修改试题'" :visible.sync="dialogVisible">
            <el-form :model="formData">
                <el-form-item label="试题题型">
                    <el-radio-group v-model="formData.fadio">
                        <el-radio :label="1">单选题</el-radio>
                        <el-radio :label="2">多选题</el-radio>
                        <el-radio :label="3">判断题</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="试题分类">
                    <el-select v-model="formData.classification" clearable placeholder="请选择" size="small" class="abcdCl">
                        <el-option v-for="item in classificationOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="试题题干">
                    <el-input class="abcdCl" placeholder="请输入" v-model="formData.stem" clearable size="small"></el-input>
                </el-form-item>
                <el-form-item label="选项内容">
                    <div class="abcdCl">
                        <el-button size="mini" type="primary" plain :disabled="formData.domains.length < 4 ? false : true" @click="addDomain">新增选项</el-button>
                        <div v-for="(domain, index) in formData.domains" :key="domain.key" class="abcdCls">
                            <div>{{ abcd[index] }}</div>
                            <el-input v-model="domain.value" placeholder="请输入" clearable size="mini"></el-input>
                            <el-button size="mini" v-if="formData.domains.length > 1" @click.prevent="removeDomain(domain)">删除</el-button>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="正确答案">
                    <el-radio-group v-model="formData.answer" v-if="formData.fadio == 1 || formData.fadio == 3">
                        <el-radio :label="abcd[index]" v-for="(item, index) in formData.domains" :key="index">{{abcd[index]}}</el-radio>
                    </el-radio-group>
                    <el-checkbox-group v-model="formData.answerBox" v-if="formData.fadio == 2">
                        <el-checkbox :label="abcd[index]" v-for="(item, index) in formData.domains" :key="index">{{abcd[index]}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="试题难度" style="display: flex; align-items: center;">
                    <el-rate class="abcdCl" v-model="formData.difficulty"></el-rate>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSave">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    import {
        apiTrainingQuestionsList,
        apiTrainingQuestionsDel,
		apiTrainingList,
        apiTrainingAdd,
        apiTrainingEdit,
        apiTrainingDel,
    } from '@/api/apifox.js'
    export default {
        components: {},
        data() {
            return {
                tableHeight: window.innerHeight - 355,
                // 搜索
                searchItem: {
                    classification: '', // 试题分类
                    questionType: '', // 题型
                    TestQuestionName: '', // 试题名称
                },
                classificationOptions: [
                    {value: 1, label: '理论课程'},
                    {value: 2, label: '施工安全知识'},
                    {value: 3, label: '电工理论知识'},
                ], // 试题分类列表
                questionTypeOptions: [
                    {value: 1, label: '单选题'},
                    {value: 2, label: '多选题'},
                    {value: 3, label: '判断题'},
                ], // 题型列表

                tableData: [
                    /* {id: 1, val1: '施工安全知识', val2: '使用灭火器扑救火灾', val3: '使用灭火器扑救火灾时要对准火焰(  )喷射', val4: '2025-10-10 12:00:00',  },
                    {id: 2, val1: '施工安全知识', val2: '使用灭火器扑救火灾', val3: '使用灭火器扑救火灾时要对准火焰(  )喷射', val4: '2025-10-10 12:00:00',  },
                    {id: 3, val1: '施工安全知识', val2: '使用灭火器扑救火灾', val3: '使用灭火器扑救火灾时要对准火焰(  )喷射', val4: '2025-10-10 12:00:00',  },
                    {id: 4, val1: '施工安全知识', val2: '使用灭火器扑救火灾', val3: '使用灭火器扑救火灾时要对准火焰(  )喷射', val4: '2025-10-10 12:00:00',  }, */
                ], // 列表
                currentPage: 1, // 当前页数
                pageSize: 10, // 每页显示条目个数
                total: 0, // 总条目数

                dialogVisible: false, // 对话框
                formData: {
                    fadio: 1, // 试题题型
                    classification: '', // 试题分类
                    stem: '', // 试题题干
                    domains: [{ value: '' }], // 选项内容
                    answer: 'A', // 正确答案 单选
                    answerBox: [], // 正确答案 多选
                    difficulty: null, // 试题难度
                },
                abcd: ['A', 'B', 'C', 'D'],

                projectId: '', // 项目id

                popupType: 1, //1添加2修改
            };
        },
        computed: {},
        watch: {
            porjectObject(val, oldVal) {
                if (val.deptId != oldVal.deptId) {
                    this.projectId = val.deptId;
                    this.currentPage = 1;
                    this.getList();
                }
            }
        },
        created() {

        },
        mounted() {
            this.projectId = this.$store.state.porjectObject.deptId;
            this.getList();
        },
        methods: {
            getList() {
                apiTrainingList({
                    deptId: this.projectId,
                    pageSize: this.pageSize, // 分页大小
                    pageNum: this.currentPage, // 分页页码
                }).then(res => {
                    console.log('题库列表: ', res);
                    if (res.code == 200) {
                        this.tableData = res.data.list;
                        this.total = res.data.total;
                    } else {
                        // this.$Message.warning(res.msg);
                    }
                }).catch(error => {
                    console.log(error);
                });
            },
            /* 添加事件 */
            onAdd() {
                this.formData = {
                    fadio: 1, // 试题题型
                    classification: '', // 试题分类
                    stem: '', // 试题题干
                    domains: [{ value: '' }], // 选项内容
                    answer: 'A', // 正确答案 单选
                    answerBox: [], // 正确答案 多选
                    difficulty: null, // 试题难度
                };
                this.popupType = 1;
                this.dialogVisible = true;
            },

            onSave() {
                /*
                    {
                        "categoryId": "48",
                        "title": "唉移动哪个吮航空公司鉴于硬这个拿抿",
                        "description": "处被准任世集业。品北多色最改断。空采已处去反。各年面斯。热明比型通此期。亲直写引。万识识决员感步现通很。",
                        "questionCount": "id tempor amet Ut",
                        "sortOrder": "est mollit id dolor",
                        "status": "voluptate commodo",
                        "questions":[{
                            "questionType":0,
                            "content":"内容",
                            "explanation":"答案解析",
                            "difficulty":"难度等级"
                        }]
                    }
                */
                console.log(this.formData);
                return
                apiTrainingAdd({
                    categoryId: '', // 分类
                    difficulty: '', // 试题难度
                    imgUrl: '', // 图片
                    title: '', // 标题
                    description: '', // 描述
                    questionCount: '', // 数量
                    sortOrder: '', // 排序
                    status: '', // 状态
                }).then(res => {
                    console.log('删除: ', res);
                    if (res.code == 200) {
                        this.getList();
                        this.$Message.success("操作成功");
                    } else {
                        // this.$Message.warning(res.msg);
                    }
                }).catch(error => {
                    console.log(error);
                });
            },

            /* 删除事件 */
            onDel(row) {
                console.log(row, row.id)
                apiTrainingQuestionsDel(row.id).then(res => {
                    console.log('删除: ', res);
                    if (res.code == 200) {
                        this.getList();
                        this.$Message.success("操作成功");
                    } else {
                        // this.$Message.warning(res.msg);
                    }
                }).catch(error => {
                    console.log(error);
                });
            },

            onSearch() {
                this.currentPage = 1;
                this.getList();
            },

            /* 新增选项 */
            addDomain() {
                this.formData.domains.push({
                    value: '',
                    key: Date.now()
                });
            },
            /* 删除选项 */
            removeDomain(item) {
                var index = this.formData.domains.indexOf(item)
                if (index !== -1) {
                    this.formData.domains.splice(index, 1)
                }
            },

            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
        }
    };
</script>

<style lang="scss" scoped>
    .questionBank {
        padding: 20px;

        .box-card {

            .cardBody {
                display: flex;
                align-items: center;
                gap: 15px;

                .cardBody1 {
                    display: flex;
                    align-items: center;
                    gap: 10px;

                   .ecard_val {
                       width: 200px;
                   }
                }
            }
        }

        .boxCard {
            margin-top: 20px;

            .boxCard_-pagination {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 20px;
            }
        }

        .abcdCl {
            width: 100%;
        }

        .abcdCls {
            display: flex;
            align-items: center;
            gap: 10px;
        }
    }
</style>
